<template>
  <div class="infor" :style="bg">
    <van-nav-bar
      title="基本信息"
      right-text="修改"
      left-arrow
      @click-right="onClickRight"
      @click-left="onClickLeft"
    />
    <form @submit.prevent="information" class="box2">
      <div class="line">
        <span class="fx">姓名:</span>
        <input
          class="box2_i"
          label="姓名"
          placeholder="请输入真实姓名"
          v-model="name"
          v-bind:disabled="disabled"
        />
      </div>
      <div class="line">
        <span class="fx">性别:</span>
        <select
          class="box2_g"
          v-model="sex"
          selected="selected"
          v-bind:disabled="disabled"
        >
          <option value="">请选择性别</option>
          <option>男</option>
          <option>女</option>
        </select>
      </div>
      <div class="line">
        <span class="fx">血型:</span>
        <input
          class="box2_i"
          label="血型"
          placeholder="请输入血型"
          type="text"
          v-model="blood"
          v-bind:disabled="disabled"
        />
      </div>
      <div class="line">
        <span class="fx">年龄:</span>
        <input
          class="box2_i"
          label="年龄"
          placeholder="请输入年龄"
          maxlength="3"
          type="number"
          v-model="age"
          v-bind:disabled="disabled"
        />
      </div>
      <div class="line">
        <span class="fx">类型:</span>
        <select class="box2_g" v-model="type" v-bind:disabled="disabled">
          <option selected="selected" value="">请选择类型</option>
          <option>独居</option>
          <option>夫妇俩</option>
          <option>子女外出</option>
          <option>子女在身旁</option>
          <option>其他</option>
        </select>
      </div>
      <span class="fx">自我介绍:</span>
      <textarea
        class="box2_t"
        label="自我介绍"
        placeholder="自我介绍"
        type="textarea"
        rows="4"
        v-bind:disabled="disabled"
        v-model="introduction"
      ></textarea>
      <button
        class="information_submit"
        @click="information"
        v-bind:disabled="disabled"
      >
        保存
      </button>
    </form>
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip" />
  </div>
</template>
<script>
import AlertTip from "../../components/AlertTip/AlertTip";
import { reqinformation } from "../../api";
import { mapState } from "vuex";
// JS
export default {
  name: "Information",
  data() {
    return {
      name: "",
      sex: "",
      blood: "",
      age: "",
      type: "",
      introduction: "",
      disabled: false,
      alertText: "", // 提示文本
      alertShow: false, // 是否显示警告框
      bg: {
        backgroundImage: "url(" + require("./images/lantian.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },
  components: {
    AlertTip,
  },
  computed: {
    ...mapState(["userList", "token"]),
  },
  methods: {
    showAlert(alertText) {
      this.alertShow = true;
      this.alertText = alertText;
    },
    async information() {
      let result;

      if (!this.name) {
        // 姓名必须指定
        this.showAlert("姓名必须指定");
        return;
      } else if (!this.sex) {
        // 性别必须指定
        this.showAlert("性别必须指定");
        return;
      } else if (!this.blood) {
        // 血型必须指定
        this.showAlert("血型必须指定");
        return;
      } else if (this.age.length > 3) {
        // 年龄必须指定
        this.showAlert("请输入正确的年龄");
        return;
      } else if (!this.age) {
        // 年龄必须指定
        this.showAlert("年龄必须指定");
        return;
      } else if (!this.type) {
        // 类型必须指定
        this.showAlert("类型必须指定");
        return;
      } else if (!this.introduction) {
        // 自我介绍必须指定
        this.showAlert("自我介绍必须指定");
        return;
      }
      const { name, sex, blood, age, type, introduction } = this;
      result = await reqinformation({
        name,
        sex,
        blood,
        age,
        type,
        introduction,
      });
      // 根据结果数据处理
      if (result.code1 === 0) {
        const List = result.data;
        this.$store.dispatch("recordList", List);
        this.showAlert("保存成功");
        this.$router.replace("/information");
        // console.log(result.data);
        localStorage.setItem("age", result.data.age);
        localStorage.setItem("sex", result.data.sex);
        localStorage.setItem("blood", result.data.blood);
        localStorage.setItem("name", result.data.name);
        localStorage.setItem("introduction", result.data.introduction);
        localStorage.setItem("type", result.data.type);
        this.disabled = true;
      } else {
        // 显示警告提示
        const msg = result.msg;
        this.showAlert(msg);
      }
    },

    closeTip() {
      this.alertShow = false;
      this.alertText = "";
    },
    onClickLeft() {
      this.$router.replace("/profile");
    },
    onClickRight() {
      this.disabled = false;
    },
    init() {
      if (localStorage.getItem("name") !== null) {
        this.name = localStorage.getItem("name");
        this.age = localStorage.getItem("age");
        this.sex = localStorage.getItem("sex");
        this.blood = localStorage.getItem("blood");
        this.introduction = localStorage.getItem("introduction");
        this.type = localStorage.getItem("type");
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
  },
  created() {
    this.init();
  },
};
</script>
<style>
.infor {
  height: 100%;
}
#information {
  position: relative;
  right: 14%;
  margin-left: 50%;
  font-size: 20px;
}
.box1 {
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.box2 {
  height: 88%;
  width: 90%;
  margin: 0 5%;
  margin-top: 25px;
}
.go_back5 {
  position: absolute;
  left: 1px;
}
.line {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  line-height: 50px;
}
.box2_i {
  width: 85%;
  height: 50px;
  float: right;
  z-index: 99;
  padding-left: 10px;
  box-sizing: border-box;
  /* border: 1px solid #26a2ff; */
  border-radius: 4px;
  background-color: transparent;
  font: 400 14px Arial;
  outline: none;
}
.box2_f {
  width: 85%;
  height: 35px;
  float: right;
  margin-top: -33px;
  padding-left: 10px;
  box-sizing: border-box;
  /* border: 1px solid #26a2ff; */
  border-radius: 4px;
  font: 400 14px Arial;
  background-color: transparent;
}
.box2_g {
  width: 85%;
  height: 50px;
  float: right;
  padding-left: 6px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  font: 400 14px Arial;
  outline: none;
}
.box2_t {
  width: 100%;
  height: 90px;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  font: 400 14px Arial;
  outline: none;
  resize: none;
}
.box2_j {
  width: 100%;
  height: 90px;
  padding-left: 10px;
  margin-top: -90px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: transparent;
  font: 400 14px Arial;
  outline: none;
  resize: none;
}
::-webkit-input-placeholder {
  /* Webkit browsers */
  color: #332020;
  font-size: 14px;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 8 */
  color: #332020;
  font-size: 16px;
}

::moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #332020;
  font-size: 16px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}
.information_submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 10px;
  border-radius: 4px;
  background: #4cd96f;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}
.fx {
  float: left;
  height: 50px;
  line-height: 50px;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
